<template>
	<view id="login">
		<view class="top">注册</view>
		<view class="form">
			<view class="user">
				<image :src="src" alt=""></image>
			</view>
			<ul>
				<li class="must">
					<i class="iconfont icon-nicheng"></i>
					
					<a class="mint-cell mint-field is-nolabel" name="email">
						
						<view class="mint-cell-left"></view>
						<view class="mint-cell-wrapper">
							<view class="mint-cell-title">
								 <text class="mint-cell-text"></text>
								
							</view>
							<view class="mint-cell-value"><input placeholder="请输入姓名或昵称" type="text" class="mint-field-core" v-model="username"
								 name="email">
								<view class="mint-field-clear" :class="{active:username!=''}" @click="closeclear('username')">
									
									<uni-icon type="clear" size="16"></uni-icon>
								</view>
								<text class="mint-field-state is-default" color="rgb(203,203,203)">
									<i class="mintui mintui-field-default"></i>
								</text>
								<view class="mint-field-other"></view>
							</view>
							
						</view>
						<view class="mint-cell-right"></view>
					</a>
				</li>
				<li class="must">
					<i class="iconfont icon-shouji1"></i>
					
					<a class="mint-cell mint-field is-nolabel" name="mobile">
						
						<view class="mint-cell-left"></view>
						<view class="mint-cell-wrapper">
							<view class="mint-cell-title">
								 <text class="mint-cell-text"></text>
								
							</view>
							<view class="mint-cell-value"><input placeholder="请输入手机号" type="text" class="mint-field-core" v-model="tel" name="mobile">
								<view class="mint-field-clear" :class="{active:tel!=''}" @click="closeclear('tel')">
									
									<uni-icon type="clear" size="16"></uni-icon>
								</view> <text class="mint-field-state is-default" color="rgb(203,203,203)"><i class="mintui mintui-field-default"></i></text>
								<view class="mint-field-other"></view>
							</view>
							
						</view>
						<view class="mint-cell-right"></view>
					</a>
				</li>
				<li class="must">
					<i class="iconfont icon-yanzhengma1"></i>					
					<a class="mint-cell mint-field is-nolabel">
						
						<view class="mint-cell-left"></view>
						<view class="mint-cell-wrapper">
							<view class="mint-cell-title">
								<text class="mint-cell-text"></text>
								
							</view>
							<view class="mint-cell-value"><input placeholder="请输入短信验证码" type="text" class="mint-field-core" v-model="yzm">
								<view class="mint-field-clear" :class="{active:yzm!=''}" @click="closeclear('yzm')">
									
									<uni-icon type="clear" size="16"></uni-icon>
								</view> <text class="mint-field-state is-default" color="rgb(203,203,203)"><i class="mintui mintui-field-default"></i></text>
								<view class="mint-field-other">
									<send-msg ref="send" @on-run="handle_send"></send-msg>
								</view>
							</view>
							
						</view>
						<view class="mint-cell-right"></view>
					</a>
				</li>
				<li>
					<i class="iconfont icon-qiye"></i>
					
					<a class="mint-cell mint-field is-nolabel">
						
						<view class="mint-cell-left"></view>
						<view class="mint-cell-wrapper">
							<view class="mint-cell-title">
								<text class="mint-cell-text"></text>
								
							</view>
							<view class="mint-cell-value"><input placeholder="请输入公司名称" type="text" class="mint-field-core" v-model="companyName">
								<view class="mint-field-clear" :class="{active:companyName!=''}" @click="closeclear('companyName')">
									
									<uni-icon type="clear" size="16"></uni-icon>
								</view> <text class="mint-field-state is-default" color="rgb(203,203,203)">
									<i class="mintui mintui-field-default"></i>
									
								</text>
								<view class="mint-field-other"><text class="tip">(无则此项不用选)</text></view>
							</view>							
						</view>
						<view class="mint-cell-right"></view>
					</a>
				</li>
			</ul>
			<button class="btn-submit" @click="handle_login">注册</button>
			<view style="padding:20px 0 15px; text-align:center; font-size:14px;">
				<navigator style="color:#888;" url="/pages/login/login" hover-class="none">登录</navigator>
			</view>
			<view class="agree">
				<checkbox-group>
					<label>
						<checkbox value="cb" style="transform:scale(0.7)"/>阅读并同意<text class="article" @click="jumpService">服务条款</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>
<script>
	import uniIcon from "@/components/uni-icons/uni-icons.vue";
	import sendMsg from './component/sendMsg';
	import {
		setSessionStorage,
		checkTel
	} from '@/utils/mixin';
	export default {
		data() {
			return {
				src: require('@/static/temp/header.png'),
				username: '',
				tel: '',
				yzm: '',
				companyName: '',
				show: ''
			}
		},
		components: {
			
			sendMsg,
			uniIcon
			
		},
		watch: {},
		computed: {

		},
		mounted() {},
		methods: {
			jumpService(){
				uni.navigateTo({
					url:'/pages/login/serviceAgree'
				})
			},
			closeclear(type) {
				if (type == 'username') {
					this.username = '';
				} else if (type == 'tel') {
					this.tel = '';
				} else if (type == 'yzm') {
					this.yzm = '';
				} else if (type == 'companyName') {
					this.companyName = '';
				}
			},
			// 发送验证码
			handle_send() {
				if (!this.username) {
					
					this.$api.msg('请输入姓名或昵称');
					return;
				}
				if (!this.tel) {
					
					
					this.$api.msg('请输入手机号');
					return;
				}
			
				if (!checkTel(this.tel)) {
				
					
					this.$api.msg('请输入正确手机号');
					return;
				}
				
				uni.request({
					url: this.$base_url + '/api/v1/sand', //仅为示例，并非真实接口地址。
					data: {
						mobile: this.tel
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: "POST",
					success: (result) => {
						if (result.data.code === 200) {
							this.$refs.send.start();
							const userinfo = JSON.stringify(result.data.data);							
						} else {
							
							this.$api.msg('请重新获取验证码');
						}
					},
					fali: (res) => {
						console.log(res.data);
					}

				});
			},
			// 登录
			handle_login() {
				
				if (!this.username) {
					
					this.$api.msg('请输入姓名或昵称');
					return;
				}
				if (!this.tel) {
					
					
					this.$api.msg('请输入手机号');
					return;
				}
				if (!checkTel(this.tel)) {
					
					
					this.$api.msg('请输入正确手机号');
					return;
				}
				if (!this.yzm) {
					
					
					this.$api.msg('请输入短信验证码');
					return;
				}				
				uni.request({
				   url: this.$base_url+'/api/v1/userLogin', //仅为示例，并非真实接口地址。
				   data: {mobile:this.tel,code:this.yzm},
				   header: {  "Content-Type": "application/x-www-form-urlencoded"  },
				   method:"POST",
				   success: (result) => {					   
				       if(result.data.code ==1){
						   this.$api.msg("注册成功");
							uni.navigateTo({
								url:'/pages/login/login'
							})
				       }else{
				        	this.$api.msg(result.data.msg);				 
				       }
				   },
				   fali:(res)=>{
					   console.log(res.data);
				   }
				   
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../mixin.scss";

	#login {
		.top {
			height: 220px;
			font-size: 24px;
			color: #fff;
			padding: 44px 24px 0;
			background-image: linear-gradient(to right, #ff8d70, #ff7064);
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(/static/temp/bg.png) no-repeat center;
				background-size: 100% auto;
			}
		}

		.form {
			position: relative;
			background-color: #fff;
			border-radius: 10px;
			padding: 60px 35px 40px;
			margin: -96px 24px 0;
			box-shadow: 0 0 20px rgba(255, 140, 112, .3);

			.user {
				width: 80px;
				height: 80px;
				border: 5px solid #fff;
				background-color: #fff;
				border-radius: 100px;
				position: absolute;
				top: -40px;
				left: 50%;
				margin-left: -40px;

				image {
					width: 100%;
					height:100%;
				}
			}

			.btn-submit {
				width: 100%;
				height: 90upx;
				line-height: 90upx;
				background-image: linear-gradient(to right, #ff8d70, #ff7064);
				border-radius: 100px;
				margin-top: 50upx;
				font-size: 36upx;
				color: #fff;
			}

			li {
				padding-left: 30px;
				margin-bottom: 15px;
				position: relative;

				.iconfont {
					font-size: 22px;
					color: $gray888;
					float: left;
					margin-left: -30px;
					line-height: 38px;

					&.icon-qiye {
						font-size: 28px;
					}
				}

				.mint-cell {
					min-height: 40px;
					height: 40px;
					border-bottom: 1px solid #d0d0d0;

					.tip {
						font-size: 12px;
						color: #c3c3c3;
						margin-left: 10px;
					}

					button {
						width: 80px;
						height: 30px;
						margin-bottom: 5px;
						color: #fff;
						font-size: 12px;
						border-radius: 3px;
						margin-left: 10px;
						background-image: linear-gradient(to right, #ff8d70, #ff7064);

						&[disabled] {
							background-image: none;
							background-color: #c6c6c6
						}
					}
				}

				&.must {
					&:before {
						content: '*';
						font-size: 13px;
						color: #ff2c4b;
						position: absolute;
						left: -14px;
						top: 0;
						line-height: 38px;
					}
				}
			}
		}
	}
	.agree{
		font-size: 32upx;
		text-align: center;
		font-weight:bold;
		color:#888;
		.article{
			text-decoration:underline;
			color:#ff8d70;
		}
	}
</style>
<style lang="scss">
	@import "../../mixin.scss";
	@import "./public.css";

	#login {
		.form {
			li {
				.mint-cell {
					.mint-cell-wrapper {
						padding: 5px 0;
						font-size: 15px;
						background: none;
						@include placeholderColor(#c6c6c6);
					}
				}
			}
		}
	}

	.active {
		display: block;
	}
</style>
